<template>
  <el-form ref="form" label-position="right" :model="currentRow" label-suffix="："
           label-width="140px">

    <div class="geology-children-fanghu">
      边坡支护措施
    </div>
    <div class="fanghu_form_item_view">
      <el-form-item label="坡面防护">
        <el-checkbox-group size="medium" v-model="currentRow.slopeProtectList">
          <el-checkbox-button v-for="item in EnumSlopeProtectList" :key="item.code" :label="item.code">{{item.name}}
          </el-checkbox-button>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="其他坡面防护" v-if="currentRow.slopeProtectList.indexOf(20) !== -1">
        <el-input v-model="currentRow.slopeProtectRemark" clearable placeholder="请描述其他坡面防护"></el-input>
      </el-form-item>
      <!-- 路堤边坡-->
      <div v-if="currentRow.slopeType === 4 && currentRow.hasRiver === 1">
        <el-form-item label="沿河防护">
          <el-checkbox-group size="medium" v-model="currentRow.riverProtectList">
            <el-checkbox-button v-for="item in EnumRiverProtectList" :key="item.code" :label="item.code">{{item.name}}
            </el-checkbox-button>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="其他沿河防护" v-if="currentRow.riverProtectList.indexOf(20) !== -1">
          <el-input v-model="currentRow.riverProtecttRemark" clearable placeholder="请描述其他沿河防护"></el-input>
        </el-form-item>
      </div>

      <el-form-item label="支挡设施">
        <el-checkbox-group size="medium" v-model="currentRow.protectionTypeList">
          <el-checkbox-button v-for="item in EnumProtectionTypeList" :key="item.code" :label="item.code">{{item.name}}
          </el-checkbox-button>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="其他支挡设施" v-if="currentRow.protectionTypeList.indexOf(20) !== -1">
        <el-input v-model="currentRow.protectionTypeRemark" clearable placeholder="请描述其他支挡设施"></el-input>
      </el-form-item>


      <div class="geology-children">
        支护信息
        <el-button size="mini" type="primary" @click="addProtectionDetail" icon="el-icon-circle-plus-outline">添加
        </el-button>
      </div>

      <div class="add-tab">
        <el-table border :data="currentRow.protectionDetailList" class="m-t-24">
          <el-table-column label="级数" width="130">
            <template slot-scope="scope">
              <el-form-item :prop="`protectionDetailList.${scope.$index}.level`" label-width="0px">
                <el-input size="small" v-model="scope.row.level" type="number" placeholder="输入数字" :maxlength="20"
                          style="width:100%"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="坡率" width="130">
            <template slot-scope="scope">
              <el-form-item :prop="`protectionDetailList.${scope.$index}.gradient`" label-width="0px">
                <el-input size="small" v-model="scope.row.gradient" placeholder="输入数字" :maxlength="20"
                          style="width:100%"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="支护措施" width="150">
            <template slot-scope="scope">
              <el-form-item label-width="0px" :prop="`protectionDetailList.${scope.$index}.dept`">
                <el-select size="small" v-model="scope.row.dept" clearable placeholder="请选择">
                  <el-option
                    v-for="item in protectionList"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code">
                  </el-option>
                </el-select>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="主要结构物尺寸">
            <template slot-scope="scope">
              <div v-if="scope.row.dept===14 ||scope.row.dept===15 || scope.row.dept===16  || scope.row.dept===17">
                <el-row v-if="scope.row.dept===14" :gutter="10">
                  <el-form-item label="类型" label-width="60px" style="margin:10px">
                    <el-radio-group size="small" v-model="scope.row.sizeType">
                      <el-radio-button v-for="item in EnumSizeType2List" :key="item.code" :label="item.code">
                        {{item.name}}
                      </el-radio-button>
                    </el-radio-group>
                  </el-form-item>
                  <!--                矩形-->
                  <div v-if="scope.row.sizeType === 1">
                    <el-form-item style="margin-bottom:10px" label="" label-width="0px">
                      <el-row>
                        <el-col :span="11">
                          <el-input v-model="scope.row.sizeSectionLength" size="small" type="number" placeholder="长"
                                    style="width:100%">
                            <template slot="prepend">截面</template>
                          </el-input>
                        </el-col>
                        <el-col :span="1" style="width: 3.16667%;">X</el-col>
                        <el-col :span="11">
                          <el-input v-model="scope.row.sizeSectionWidth" size="small" type="number" placeholder="宽"
                                    style="width:100%">
                            <template slot="append">m</template>
                          </el-input>
                        </el-col>
                      </el-row>
                    </el-form-item>
                    <el-col :span="12">
                      <el-form-item label-width="0px">
                        <el-input v-model="scope.row.sizeSpacing" size="small" type="number">
                          <template slot="prepend">间距</template>
                          <template slot="append">m</template>
                        </el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label-width="0px">
                        <el-input v-model="scope.row.sizeLength" size="small" placeholder="" type="number">
                          <template slot="prepend">长</template>
                          <template slot="append">m</template>
                        </el-input>
                      </el-form-item>
                    </el-col>
                  </div>
                  <!--                圆形-->
                  <div v-if="scope.row.sizeType === 2">
                    <el-form-item label-width="0px">
                      <el-input v-model="scope.row.sizeSection" size="small" placeholder="" type="number">
                        <template slot="prepend">直径</template>
                        <template slot="append">m</template>
                      </el-input>
                    </el-form-item>

                    <el-form-item label-width="0px">
                      <el-input v-model="scope.row.sizeSpacing" size="small" placeholder="" type="number">
                        <template slot="prepend">间距</template>
                        <template slot="append">m</template>
                      </el-input>
                    </el-form-item>

                    <el-form-item label-width="0px">
                      <el-input v-model="scope.row.sizeLength" size="small" placeholder="" type="number">
                        <template slot="prepend">桩长</template>
                        <template slot="append">m</template>
                      </el-input>
                    </el-form-item>
                  </div>

                </el-row>
                <el-row v-if="scope.row.dept===15" :gutter="10">
                  <el-form-item label-width="0px">
                    <el-select  size="small" v-model="scope.row.sizeType" clearable placeholder="请选择类型" style="margin-bottom: 10px">
                      <el-option
                        v-for="item in EnumSizeType1List"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code">
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-col :span="12">
                    <el-form-item label-width="0px">
                      <el-input v-model="scope.row.sizeHeight" size="small" placeholder="墙高" type="number">
                        <template slot="append">m</template>
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label-width="0px">
                      <el-input v-model="scope.row.sizeWidth" size="small" placeholder="墙顶宽" type="number">
                        <template slot="append">m</template>
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row v-if="scope.row.dept===16 || scope.row.dept===17" :gutter="10">

                  <el-form-item label-width="0px">
                    <el-row>
                      <el-col :span="14">
                        <el-input v-model="scope.row.sizeSpacing" size="small" type="number" placeholder="间距"
                                  style="width:100%">
                          <template slot="prepend">{{scope.row.dept === 16?"锚索":"锚杆"}}</template>
                        </el-input>
                      </el-col>
                      <el-col :span="1" style="width: 3.16667%;">X</el-col>
                      <el-col :span="9">
                        <el-input v-model="scope.row.sizeLength" size="small" type="number" placeholder="宽"
                                  style="width:100%">
                          <template slot="append">m</template>
                        </el-input>
                      </el-col>
                    </el-row>
                  </el-form-item>

                  <el-form-item label-width="0px">
                    <el-row>
                      <el-col :span="14">
                        <el-input v-model="scope.row.sizeSectionLength" size="small" type="number" placeholder="长"
                                  style="width:100%">
                          <template slot="prepend">框架梁截面尺寸</template>
                        </el-input>
                      </el-col>
                      <el-col :span="1" style="width: 3.16667%;">X</el-col>
                      <el-col :span="9">
                        <el-input v-model="scope.row.sizeSectionWidth" size="small" type="number" placeholder="宽"
                                  style="width:100%">
                          <template slot="append">m</template>
                        </el-input>
                      </el-col>
                    </el-row>
                  </el-form-item>
                </el-row>
              </div>
              <div v-else>
                <el-form-item :prop="`protectionDetailList.${scope.$index}.size`" label-width="0px">
                  <el-input size="small" v-model="scope.row.size" placeholder="请输入" :maxlength="20" style="width:100%"></el-input>
                </el-form-item>
              </div>

            </template>
          </el-table-column>
          <el-table-column label="备注" width="150">
            <template slot-scope="scope">
              <el-form-item :prop="`protectionDetailList.${scope.$index}.remark`" label-width="0px">
                <el-input size="small" v-model="scope.row.remark" placeholder="请输入" :maxlength="20"
                          style="width:100%"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="70">
            <template slot-scope="scope">
              <el-button type="text" style="color:red" @click="handleDeleteProtectionDetail(scope.$index)">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="geology-children-fanghu">
        地表排水设施
      </div>

      <el-form-item label="类型">
        <el-checkbox-group size="medium" v-model="currentRow.waterDrainStepList">
          <el-checkbox border v-for="item in EnumWaterDrainStepList" :key="item.code" :label="item.code">{{item.name}}
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="其他类型"
                    v-if="currentRow.waterDrainStepList && currentRow.waterDrainStepList.indexOf(5) !== -1">
        <el-input v-model="currentRow.waterDrainStepRemark" clearable placeholder="请描述其他类型"></el-input>
      </el-form-item>

      <el-form-item label="材料">
        <el-checkbox-group size="medium" v-model="currentRow.waterDrainStuffList">
          <el-checkbox border v-for="item in EnumWaterDrainStuffList" :key="item.code" :label="item.code">{{item.name}}
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="其他材料"
                    v-if="currentRow.waterDrainStuffList && currentRow.waterDrainStuffList.indexOf(4) !== -1">
        <el-input v-model="currentRow.waterDrainStuffRemark" clearable placeholder="请描述其他材料"></el-input>
      </el-form-item>

      <el-form-item label="主要横断面形式">
        <el-checkbox-group size="medium" v-model="currentRow.waterDrainShapeList">
          <el-checkbox border v-for="item in EnumWaterDrainShapeList" :key="item.code" :label="item.code">{{item.name}}
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="其他横断面形式"
                    v-if="currentRow.waterDrainShapeList && currentRow.waterDrainShapeList.indexOf(4) !== -1">
        <el-input v-model="currentRow.waterDrainShapeRemark" clearable placeholder="请描述其他横断面形式"></el-input>
      </el-form-item>
      <div class="geology-children-fanghu">
        地下排水设施
      </div>
      <el-form-item>
        <el-checkbox-group size="medium" v-model="currentRow.groundwaterDrainStepList">
          <el-checkbox border v-for="item in EnumGroundwaterDrainStepList" :key="item.code" :label="item.code">
            {{item.name}}
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="其他地下排水设施"
                    v-if="currentRow.groundwaterDrainStepList && currentRow.groundwaterDrainStepList.indexOf(6) !== -1">
        <el-input v-model="currentRow.groundwaterDrainStepRemark" clearable placeholder="请描述其他地下排水设施"></el-input>
      </el-form-item>
    </div>
  </el-form>
</template>
<script>

import ItemMixins from "./item.mixins";
import Enums from '@/utils/enums'

export default {
  props: ['value', 'isLook'],
  mixins: [ItemMixins,Enums],
  data() {
    return {
      EnumDiBiaoShuiTiList: [],
      EnumGroundwaterInfoList: [],
      EnumZhiBeiFaYuList: [],
      EnumBuLiangDiZhiList: [],
      EnumConstructionList: [],
      EnumRockHardList: [],
      EnumJieGouMianList: [],
      EnumSysBooleanList: [],
      EnumSlopeProtectList: [],
      EnumRiverProtectList: [],
      EnumProtectionTypeList: [],
      EnumWaterDrainStepList: [],
      EnumWaterDrainShapeList: [],
      EnumWaterDrainStuffList: [],
      EnumGroundwaterDrainStepList: [],
      EnumSizeType1List: [],
      EnumSizeType2List: [],
    }
  },
  computed: {
    protectionList() {
      let protectionList = []
      this.currentRow.protectionTypeList.map(x => {
        this.EnumProtectionTypeList.map(y => {
          //无和其他不添加
          if (x === y.code && y.code !== 0 && y.code !== 20) {
            protectionList.push(y)
          }
        })
      })
      //无和其他不添加
      this.currentRow.riverProtectList.map(x => {
        this.EnumRiverProtectList.map(y => {
          if (x === y.code && y.code !== 0 && y.code !== 20) {
            protectionList.push(y)
          }
        })
      })
      //无和其他不添加
      this.currentRow.slopeProtectList.map(x => {
        this.EnumSlopeProtectList.map(y => {
          if (x === y.code && y.code !== 0 && y.code !== 20) {
            protectionList.push(y)
          }
        })
      })
      //去重
      let result = [];
      let obj = {};
      for (let i = 0; i < protectionList.length; i++) {
        if (!obj[protectionList[i].code]) {
          result.push(protectionList[i]);
          obj[protectionList[i].code] = true;
        }
      }
      return result
    },
    currentRow: {
      get() {
        return this.value
      },
      set(value) {
        this.$emit('input', value)
      }
    }
  },
  methods: {

    cleanData(type) {
      if (type === 4) {
        this.currentRow.structure = ''
        this.currentRow.structureSide = ''
        this.currentRow.hasRiver = 0
      } else {
        this.currentRow.hasRiver = ''
        this.currentRow.riverType = ''
      }

    },
    // 内部表单校验
    _validatorForm() {
      return new Promise((resolve) => {
        this.$refs.form.validate((valid) => {
          valid && resolve()
        })
      })
    }
  },
  mounted() {
    this.queryDictList(['EnumSizeType1', 'EnumSizeType2', 'EnumGroundwaterDrainStep', 'EnumWaterDrainShape', 'EnumWaterDrainStuff', 'EnumWaterDrainStep', 'EnumProtectionType', 'EnumRiverProtect', 'EnumSlopeProtect', 'EnumDiBiaoShuiTi', 'EnumGroundwaterInfo', 'EnumZhiBeiFaYu', 'EnumBuLiangDiZhi', 'EnumConstruction', 'EnumRockHard', 'EnumJieGouMian', 'EnumSysBoolean'],
      ['EnumSizeType1List', 'EnumSizeType2List', 'EnumGroundwaterDrainStepList', 'EnumWaterDrainShapeList', 'EnumWaterDrainStuffList', 'EnumWaterDrainStepList', 'EnumProtectionTypeList', 'EnumRiverProtectList', 'EnumSlopeProtectList', 'EnumDiBiaoShuiTiList', 'EnumGroundwaterInfoList', 'EnumZhiBeiFaYuList', 'EnumBuLiangDiZhiList', 'EnumConstructionList', 'EnumRockHardList', 'EnumJieGouMianList', 'EnumSysBooleanList']);
  }
}
</script>

<style lang="less" scoped>
  // 修改table
   /deep/.el-table__row{
      background: white !important;
    }
/deep/.el-table .el-table__body tr.current-row > td {
  background-color: #1990FE !important;
}
/deep/.el-table .el-table__body tr:hover > td {
  background-color: #1990FE !important;
}
  .form_compact {
    display: flex;

    & /deep/ .el-input input {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    & /deep/ .el-button {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }

  .el-button {
    padding-right: 40px;
  }

  .el-form-item__label {
    /*padding: 0px;*/
  }

  input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
  }

  .geology {
    font-size: 20px;
    border-bottom: 1px solid;
    margin-bottom: 20px;
    margin-top: 20px;

  }

  .geology-children {
    font-size: 15px;
    border-bottom: 1px solid;
    margin-bottom: 20px;
    margin-top: 20px;
    margin-left: 20px;
  }

  .geology-children-fanghu {
    font-size: 15px;
    border-bottom: 1px solid;
    margin-bottom: 10px;
    margin-top: 10px;
    color: #1990FE;
    font-weight: 600;
  }

  .delete_button {
    color: #ff4d51;
  }

  .fanghu_form_item_view {

      .el-form-item {
        margin-bottom: 5px;
      }
    .el-table td, .el-table th {
      padding: 3px 0;
      font-size: 13px;
    }
  }
</style>
